<template>
    <div class="map-container">

        <div id="map" class="map-container">
        </div>
        <mapLegend></mapLegend>

    </div>
</template>

<script>
import 'ol/ol.css';
import { Map, View } from 'ol';
import TileLayer from 'ol/layer/Tile';
import { XYZ } from 'ol/source';
import WMTSTileGrid from 'ol/tilegrid/WMTS';
import 'ol/proj/epsg4326';
import { createPointLayer, createWmsLayer } from '@/views/biz/utils/layerLoader';
import { wmsBaseUrl } from '@/views/biz/utils/config'
export default {
    name: 'MapContainer',
    props: {
        points: {
            type: [Array],
            default: null
        },
        layerId: {
            type: String,
            default: ''
        },

    },

    data() {
        return {
            map: null,
            tiandituToken: '3d9e801ed2c10bc2e6eba8037e53817b',
            // points: [],
            basemapType: 'img',
        };
    },
    components: {

        mapLegend: () => import("./componts/mapLegend.vue"),
    },
    watch: {
        points: {
            handler(newPoints) {
                if (newPoints && newPoints.length > 0) {
                    this.createLayer(newPoints);

                }
            },
            immediate: true
        }
    },
    computed: {
    },
    mounted() {
        this.initMap();
    },
    beforeDestroy() { this.map?.dispose(); },
    methods: {

        createLayer(points) {
            let center = null;
            if (points) {
                center = [points[0].longitude, points[0].latitude];
                let newLayer = createPointLayer({
                    data: points,
                    layerId: this.layerId,
                    layerType: "Point"
                });
                newLayer.set('id', this.layerId);
                this.map.addLayer(newLayer);
            }
            if (center) {
                this.map.getView().setCenter(center);
            }


        },
        initMap() {
            let base_layer = null;
            let tdtlayer = null;
            let tdtzjtlayer = null;
            const tileGrid = new WMTSTileGrid({
                origin: [-180, 90],
                resolutions: [1.40625, 0.703125, 0.3515625, 0.17578125, 0.087890625, 0.0439453125, 0.02197265625, 0.010986328125, 0.0054931640625, 0.00274658203125, 0.001373291015625, 0.0006866455078125, 0.00034332275390625, 0.000171661376953125, 0.0000858306884765625],
                matrixIds: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15']
            })
            if (this.basemapType == 'vector') {
                base_layer = createWmsLayer({
                    url: wmsBaseUrl,
                    layerName: 'gp:base_dlg',
                    layerId: 'base_dlg',
                    params: {
                        "format": 'image/png',
                        'VERSION': '1.1.1',
                        "STYLES": '',
                        "LAYERS": 'gp:base_dlg',
                    }
                });

                base_layer.set("id", 'base_map');
                //tainditu矢量
                tdtlayer = new TileLayer({
                    name: 'tianditu-vec',
                    source: new XYZ({
                        url: `http://t{0-7}.tianditu.gov.cn/vec_c/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=vec&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${this.tiandituToken}`,
                        projection: 'EPSG:4326',
                        tileGrid: tileGrid
                    })
                })
                tdtlayer.set("id", 'base_tianditu');

                tdtzjtlayer = new TileLayer({
                    name: 'tianditu-cva',
                    source: new XYZ({
                        url: `http://t{0-7}.tianditu.gov.cn/cva_c/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=cva&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${this.tiandituToken}`,
                        projection: 'EPSG:4326',
                        tileGrid: tileGrid
                    })
                })
                tdtzjtlayer.set("id", 'base_tianditu_zhuji');
            }
            else if (this.basemapType == 'img') {
                base_layer = createWmsLayer({
                    url: wmsBaseUrl,
                    layerName: 'gp:base_img',
                    layerId: 'base_img',
                    params: {
                        "format": 'image/png',
                        'VERSION': '1.1.1',
                        "STYLES": '',
                        "LAYERS": 'gp:base_img',
                    }
                });
                base_layer.set("id", 'base_map');
                //tainditu影像
                tdtlayer = new TileLayer({
                    name: 'tianditu-img',
                    source: new XYZ({
                        url: `http://t{0-7}.tianditu.gov.cn/img_c/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=img&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${this.tiandituToken}`,
                        projection: 'EPSG:4326',
                        tileGrid: tileGrid
                    })
                })
                tdtlayer.set("id", 'base_tianditu');

                tdtzjtlayer = new TileLayer({
                    name: 'tianditu-cia',
                    source: new XYZ({
                        url: `http://t{0-7}.tianditu.gov.cn/cia_c/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=cia&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${this.tiandituToken}`,
                        projection: 'EPSG:4326',
                        tileGrid: tileGrid
                    })
                })
                tdtzjtlayer.set("id", 'base_tianditu_zhuji');

            }
            this.map = new Map({
                target: 'map',
                layers: [
                    tdtlayer,
                    tdtzjtlayer,
                    base_layer
                ],
                view: new View({
                    projection: 'EPSG:4326',
                    center: [112.930691, 35.791355],
                    constrainResolution: true,
                    zoom: 12,
                    maxZoom: 18,
                    minZoom: 1
                })
            });
        },

    }
};
</script>

<style scoped>
.map-container {
    position: relative;
    width: 100%;
    height: 100%;
}
</style>